<template>
  <div>
    <div class="btns">
      <el-dropdown @command="handleCommand">
        <el-button type="success">
          添加资源<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="0-0">章节</el-dropdown-item>
          <el-dropdown-item command="0-1">视频</el-dropdown-item>
          <el-dropdown-item command="0-2">课件</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="collapse">
      <div class="item" v-for="(item, index) in records" :key="index">
        <div class="t">
          <div class="l" @click="showIndex == index ? showIndex = undefined : showIndex = index">
            <i v-show="item.type == '0'" :class="showIndex == index ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
            <span class="title" v-html="item.title"></span>
          </div>
          <div class="r">
            <el-button-group>
              <el-button type="primary" icon="el-icon-search"></el-button>
              <el-button type="primary" icon="el-icon-setting" @click="handleUpdate(item)"></el-button>
              <el-button type="danger" icon="el-icon-delete" @click="handleDelete(item)"></el-button>
              <el-dropdown @command="handleCommand">
                <el-button type="success">
                  添加<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="`${item.id}-1`">视频</el-dropdown-item>
                  <el-dropdown-item :command="`${item.id}-2`">课件</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-button-group>
          </div>
        </div>
        <el-collapse-transition>
        <div class="b" v-show="showIndex == index">
            <div class="rows" v-for="(child, n) in item.childs" :key="`child${n}`">
              <div class="l">
                <span class="title">{{child.title}}</span>
              </div>
              <div class="r">
                <el-button-group>
                  <el-button type="primary" icon="el-icon-search"></el-button>
                  <el-button type="primary" icon="el-icon-setting" @click="handleUpdate(child)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" @click="handleDelete(item)"></el-button>
                </el-button-group>
              </div>
            </div>
        </div>
        </el-collapse-transition>
      </div>
    </div>

    <!-- 添加或修改章节对话框 -->
    <el-dialog :visible.sync="openArticle" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item :label="`${typeMap[form.type]}名称`" prop="title">
          <el-input v-model="form.title"/>
        </el-form-item>
        <el-form-item v-show="form.type != '0'" :label="`上传${typeMap[form.type]}`" prop="filePath">
          <FileUpload :limit="1" :fileType="fileType" :fileSize="500" @input="handleUploadSuccess"/>
        </el-form-item>
        <el-form-item label="预期完成时间" prop="completeTime">
          <el-date-picker v-model="form.completeTime" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitArticle">确 定</el-button>
        <el-button @click="openArticle = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listCourseResource, getCourseResource, addCourseResource, updateCourseResource, delCourseResource } from "@/api/edu/courseResource";
export default {
  name: "Resource",
  dicts: ['sys_bool_status'],
  props: {
  },
  data() {
    return {
      showIndex: undefined,
      records: [],
      openArticle: false,
      fileType: null,
      form: {
        id: undefined,
        parentId: undefined,
        title: undefined,
        channel: 0,
        type: undefined,
        filePath: undefined,
        intro: undefined,
        completeTime: undefined,
        sort: undefined
      },
      typeMap: {
        "0": "章节",
        "1": "视频",
        "2": "课件"
      },
      rules: {
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
  },
  mounted() {
    this.getList();
  },
  beforeDestroy() {
  },
  methods: {
    getList(){
      listCourseResource({channel: this.form.channel}).then(response => {
        this.records = response.data;
      });
    },
    handleUploadSuccess(data){
      this.form.filePath = data[0].url;
    },
    handleUpdate(row){
      this.resetForm();
      getCourseResource(row.id).then(response => {
        this.form = response.data;
        this.openArticle = true;
        this.title = "修改课程资源";
      });
    },
    resetForm(){
      this.form = {
        id: undefined,
        parentId: undefined,
        title: undefined,
        channel: 0,
        type: undefined,
        filePath: undefined,
        intro: undefined,
        completeTime: undefined,
        sort: undefined
      }
    },
    handleCommand(command) {
      let params = command.split("-");
      let parentId = params[0];
      let type = params[1];
      if(type == "0"){
        this.fileType = null;
      } else if(type == "1"){
        this.fileType = ["mpeg", "avi", "navi", "asf", "mov", "3gp", "wmv"];
      } else {
        this.fileType = ["doc", "xls", "ppt", "txt", "pdf"]
      }
      this.handleArticle(parentId, type)
    },
    handleArticle(parentId, type){
      this.resetForm();
      this.form.parentId = parentId;
      this.form.type = type;
      this.openArticle = true;
    },
    submitArticle(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateCourseResource(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.openArticle = false;
              this.getList();
            });
          } else {
            addCourseResource(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.openArticle = false;
              this.getList();
            });
          }
        }
      });
      
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delCourseResource(row.id);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    }
  },
};
</script>

<style lang="scss" scoped>
  .btns{
    text-align: right;
  }
  .collapse{
    .item{
      border-bottom: 1px solid #f0f0f0;
      padding: 15px 0;
    }
    .t{
      display: flex;
      justify-content: space-between;
    }
    .l{
      display: flex;
      cursor: pointer;
      .title{
        padding-left: 10px;
      }
    }
    .b{
      .rows{
        padding: 10px 0 10px 15px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .draw-enter-active, .draw-leave-active {
      transition: all 1s ease;
  }
  .draw-enter, .draw-leave-to {
      height: 0;
  }
</style>
